<script lang="ts" setup>
import { ElNotification } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import UserGroupRoleApi from "@/api/modules/org/bean/user-group-role";
import UserDeptApi from "@/api/modules/org/bean/user-dept";
import { deletePageTableSelectionDataList } from "@/utils/api-service";
import { jumpPath } from "@/utils/router-kit";
import UnitTreeDialog from "@/views/org/unit/component/unit-tree-dialog.vue";
import UserSelectDialog from "@/views/org/user/component/user-list-select-dialog.vue";
import { UserEditUrl } from "@/views/org/mapping.json";
import { JxtechPageTableColumn } from "@whjxtech/jxtech-component";
const RoleUnitUserTableRef = ref();

const props = defineProps({
  /** 作业id */
  roleId: String,
  authKey: String
});

const RoleUnitUserState = reactive({
  // ////////////////////搜索部分/////////////////////////////////////////
  queryForm: { roleId: props.roleId },
  ///////////////////////表格部分//////////////////////////////////////
  /**
   * 表格选中的数据
   */
  selectionData: [] as any[],
  /**
   * 表格的列配置
   */
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "50", type: "index" },
    { label: "部门", width: "400", prop: "unitName", type: "string" },
    {
      label: "用户",
      prop: "userFullName",
      type: "link",
      linkClick: (row: any) => {
        UserDeptApi.queryById(row.userGroupId).then((res: any) => {
          jumpPath(UserEditUrl + res.data.userId);
        });
      }
    },
    { label: "是否有效", width: "100", prop: "valid", slot: "customValid" }
  ] as JxtechPageTableColumn[],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) => UserGroupRoleApi.queryPage(null, { ...params, ...RoleUnitUserState.queryForm }),
  /** 表格数据导出 */
  expData: (params: any) => UserGroupRoleApi.exportData(null, { ...params, ...RoleUnitUserState.queryForm }),
  /**
   * 表格选中事件
   */
  tableSelectionChange: (dataList: any[], pkList: string[]) => {
    RoleUnitUserState.selectionData = dataList;
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
    deletePageTableSelectionDataList(RoleUnitUserTableRef, UserGroupRoleApi);
  },
  /**
   * 添加部门按钮点击事件
   */
  onAddUnitButtonClick: () => {
    RoleUnitUserState.unitDialogVisible = true;
  },
  /**
   * 添加用户按钮点击事件
   */
  onAddUserButtonClick: () => {
    RoleUnitUserState.userDialogVisible = true;
  },

  ////// 弹窗 start ////////
  unitDialogVisible: false,
  userDialogVisible: false,
  updateUnitDialogVisible: (val: boolean) => {
    RoleUnitUserState.unitDialogVisible = val;
  },
  updateUserDialogVisible: (val: boolean) => {
    RoleUnitUserState.userDialogVisible = val;
  },

  // 保存部门回调函数
  onSaveUnit: (data: string) => {
    let params: { roleId: string | undefined; userGroupId: any; userGroupType: any }[] = [];
    let dataArr = data.split(",");
    dataArr.forEach(element => {
      let item = {
        roleId: props.roleId,
        userGroupId: element,
        userGroupType: 2
      };
      params.push(item);
    });
    UserGroupRoleApi.saveMulti({ insert: params }).then(res => {
      ElNotification({
        message: "添加成功",
        type: "success"
      });
      RoleUnitUserTableRef.value.loadTable();
    });
  },
  // 保存用户回调函数
  onSaveUser: (data: any) => {
    let params: { roleId: string | undefined; userGroupId: any; userGroupType: any }[] = [];
    data.forEach((element: any) => {
      let item = {
        roleId: props.roleId,
        userGroupId: element.userDeptId,
        userGroupType: 1
      };
      params.push(item);
    });
    UserGroupRoleApi.saveMulti({ insert: params }).then(res => {
      ElNotification({
        message: "添加成功",
        type: "success"
      });
      RoleUnitUserState.userDialogVisible = false;
      RoleUnitUserTableRef.value.loadTable();
    });
  }
  ////// 弹窗 end ////////
});

onMounted(() => {
  RoleUnitUserTableRef.value.loadTable();
});

defineExpose({
  getRoleUnitUserTableRef: () => RoleUnitUserTableRef.value
});
</script>
<template>
  <div>
    <jxtech-basic-card title="角色用户部门管理">
      <template #operationSpace>
        <jxtech-button type="primary" @click="RoleUnitUserState.onAddUnitButtonClick" v-auth="authKey">
          <jxtech-svg-icon icon="#icon-jiahao" size="12" color="#fff"></jxtech-svg-icon>
          <span style="color: #fff">&nbsp;添加部门</span>
        </jxtech-button>
        <jxtech-button type="primary" @click="RoleUnitUserState.onAddUserButtonClick" v-auth="authKey">
          <jxtech-svg-icon icon="#icon-jiahao" size="12" color="#fff"></jxtech-svg-icon>
          <span style="color: #fff">&nbsp;添加用户</span>
        </jxtech-button>
        <jxtech-delete-button
          :disabled="RoleUnitUserState.selectionData.length == 0"
          v-auth="authKey"
          @click="RoleUnitUserState.deleteTableData"
        ></jxtech-delete-button>
      </template>
      <JxtechPageTableExt
        ref="RoleUnitUserTableRef"
        row-key="userGroupRoleId"
        :table-column="RoleUnitUserState.tableColumn"
        :load-data="RoleUnitUserState.loadData"
        :exp-data="RoleUnitUserState.expData"
        :table-height="480"
        @selection-change="RoleUnitUserState.tableSelectionChange"
      >
        <template #customValid="{ row }">
          <el-tag v-if="row.valid === '有效'" type="success" size="small">是</el-tag>
          <el-tag v-else type="danger" size="small">否</el-tag>
          <!-- <el-checkbox v-model="row.valid" true-label="有效" false-label="无效" disabled></el-checkbox> -->
        </template>
      </JxtechPageTableExt>
    </jxtech-basic-card>

    <unit-tree-dialog
      :visible="RoleUnitUserState.unitDialogVisible"
      :show-checkbox="true"
      @update:visible="RoleUnitUserState.updateUnitDialogVisible"
      @change-unit="RoleUnitUserState.onSaveUnit"
    >
    </unit-tree-dialog>
    <user-select-dialog
      :visible="RoleUnitUserState.userDialogVisible"
      @update:visible="RoleUnitUserState.updateUserDialogVisible"
      @ok="RoleUnitUserState.onSaveUser"
    >
    </user-select-dialog>
  </div>
</template>
<style lang="scss" scoped>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: var(--el-checkbox-checked-bg-color);
  border-color: var(--el-checkbox-checked-input-border-color);
}
</style>
